<template>
  <div class="mr-root">
    <div>
      <ul class="header" id="navheade">
        <li v-for="h in headerList" @click="tab(h.tabs)">
          {{h.text}}
          <slot></slot>
        </li>
      </ul>
    </div>
    <div class="gg"></div>
    <div class="count" v-for="(g,index) in topicsList" :key="index">

      <div class="heads">
        <img :src="g.author.avatar_url" alt="">
        <span class="tab" :class="{green:g.good || g.top}">
          <span v-if="g.top">置顶</span>
        <span v-if="g.good && !g.top">精华</span>
        <span v-if="!g.top && !g.good">{{g.tab | tabs }}</span>
        </span>
        <span class="counts">
            <i class="fa fa-comment-o"></i>
            {{g.reply_count}}
            <i class="fa fa-eye"></i>
            {{g.visit_count}}
            </span>

        <span>{{g.author.loginname}}</span>
      </div>

      <div class="titles">
        <span class="time">{{g.last_reply_at |lasttime}}</span>
        <router-link :to="'/topics/'+g.id">
          <p class="topics">{{g.title}}</p>
        </router-link>
      </div>



    </div>
    <p @click="more" class="mor" v-if="k"><span>点击加载更多</span></p>
    <div v-if="!k" class="about">暂时没有相关数据</div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        bl: true,
        k: false,
        tabss: "",
        topicsList: [],
        count: 1,
        headerList: [{
            text: '全部',
            tabs: 'all'
          },
          {
            text: '精华',
            tabs: 'good'
          },
          {
            text: 'weex',
            tabs: 'weex'
          },
          {
            text: '分享',
            tabs: 'share'
          },
          {
            text: '问答',
            tabs: 'ask'
          },
          {
            text: '招聘',
            tabs: 'job'
          },
        ]
      }
    },
    methods: {
      getTopics(pages) {

        this.axios.get("http://www.vue-js.com/api/v1/topics?page=" + pages)
          .then(data => {
            this.topicsList = this.topicsList.concat(data.data.data)
            // console.log(this.topicsList)
          })
          .catch(err => {
            console.log(err)
          })
      },
      root() {
        this.bl = true
      },
      gets(t) {
        this.axios.get("http://www.vue-js.com/api/v1/topics?tab=" + t + "&&page=" + this.count)
          .then(data => {
            if (this.count == 1) {
              this.topicsList = data.data.data
            } else {
              this.topicsList = this.topicsList.concat(data.data.data)
            }
            // console.log(data)
            if (this.topicsList.length == 0) {
              this.k = false
            } else {
              this.k = true
            }
            // console.log(this.homeList)
          })
          .catch(err => {
            console.log(err)
          })
      },
      getTab(tabs) {
        this.count = 1
        this.bl = false
        this.tabss = tabs
        this.gets(tabs)
      },
      more(con) {
        this.count++
          if (this.bl) {
            this.getTopics(this.count)
          } else {
            this.gets(this.tabss)
          }
      },
      tab(val) {
        this.getTab(val)
        this.k = false

        var top = document.body.scrollTop
        var speed = 50
        if (top > 0) {
          var timer = setInterval(() => {
            top -= speed
            document.body.scrollTop = top
            if (top <= 0) {
              top = 0
              clearInterval(timer)
            }
          }, 30)
        }
      }
    },
    created() {
      this.getTopics(this.count)
    },
    mounted() {
      var _this = this
      window.onscroll = function () {
        var scroll = document.body.scrollTop
        var nav = document.getElementById('navheade')
        if (scroll > 100) {
          nav.style.position = 'fixed'
          _this.k = true
        } else {
          nav.style.position = 'absolute'
          _this.k = false
        }
      }
    }
  }

</script>
<style>
  .count {
    padding: 10px;
    overflow: hidden;
    position: relative;
    clear: both;
    border-bottom: 1px solid #ccc;
  }
  
  .gg {
    margin-top: 44px;
  }
  
  .mr-root {
    position: relative;
    overflow: hidden;
  }
  
  .header {
    height: 44px;
    line-height: 44px;
    overflow: hidden;
    position: absolute;
    background-color: #f6f6f6;
    color: #4f9639;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
  }
  
  .header li {
    font-size: .5rem;
    text-align: center;
    width: 16.6%;
    float: left;
  }
  
  .tab {
    position: absolute;
    top: 5px;
    padding: 3px;
    background-color: #ccc;
    border-radius: 5px;
  }
  
  .count div {
    white-space: nowrap;
    float: left;
    vertical-align: middle;
  }
  
  .heads {
    width: 2.5rem;
  }
  
  .counts {
    display: block;
    margin: 20px 0 10px 0;
  }
  
  .count img {
    float: left;
    width: 1.5rem;
    margin-right: 5px;
  }
  
  .green {
    background-color: green;
    color: white;
  }
  
  .mor {
    display: block;
    margin: 10px;
    text-align: center;
    font-size: .5rem;
  }
  
  .mor span {
    background-color: lightgray;
    border: 1px solid #ccc;
    padding: 5px;
    border-radius: 10px;
  }
  
  div.titles {
    float: right;
    text-align: right;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-left: 25px;
    width: 6rem;
    padding-top: 15px;
  }
  
  .topics {
    font-size: .4rem;
    font-weight: bold;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  
  .about {
    text-align: center;
    padding: 30px;
    font-size: .5rem;
    font-weight: bold;
  }

</style>
